<template>
    <div>

        <div class="download">
        </div>
        <div class="seach_bar">
            <div class="seach_game">
                <div class="return" @click="change">
                    <a @click="$router.back()">
                        <p></p>
                    </a>
                </div>
                <div class="seach_input">
                    <div class="find"></div>
                    <input type="text" class="seach" placeholder="搜游戏" @click="show = true">
                </div>
                <div class="seach_button">
                    <span>搜索</span>
                </div>
            </div>
            <div class="searchContent" v-show="show">
                <div class="seach_bar" style="z-index: 2;">
                    <div class="seach_game">
                        <div class="return">
                            <a @click="show = false">
                                <p></p>
                            </a>
                        </div>
                        <div class="seach_input">
                            <div class="find"></div>
                            <input type="text" class="seach" v-model="searchValue" @keyup="getSearch"
                                placeholder="搜搜你想要的游戏">
                        </div>
                        <div class="seach_button">
                            <span>搜索</span>
                        </div>
                    </div>
                </div>
                <div class="searchhistory" v-if="historyList.length > 0">
                    <div class="historycontent">
                        <div class="title">
                            <p>历史搜索</p>
                        </div>
                        <div class="content" v-for="(item, index) in  historyList" :key="index">
                            <p @click="toGameDetail(item)">{{ item }}</p> <span @click="delHistory(item)">&#10005;</span>
                        </div>

                    </div>
                </div>
                <div class="searchhistory" v-show="searchValue == ''">
                    <div class="historycontent">
                        <div class="title">
                            <p style="color: red;">热门搜索</p>
                        </div>
                        <div class="content" v-for="(item, index) in  recommendList" :key="index">
                            <p @click="toGameDetail(item)">{{ item }}</p>
                        </div>

                    </div>
                </div>
                <div class="searchhistory" v-show="searchValue != ''">
                    <div class="historycontent">
                        <div class="title" style="display: flex; justify-content: space-between;">
                            <p>{{ searchValue }}</p>
                            <p>相关 <span style=" color: #ff5722;">{{ searchList.length }}</span>个搜索</p>
                        </div>
                        <div class="content" v-for="(item, index) in searchList" :key="index" @click="toGameDetail(item)">
                            <p>{{ item }}</p>
                        </div>

                    </div>
                </div>
            </div>
            <div class="seach_title" v-show="!show">
                <ul>
                    <li>
                        <p class="active">最新</p>
                    </li>
                    <li>
                        <p>评分</p>
                    </li>
                    <li>
                        <p>大家想要</p>
                    </li>
                    <li>
                        <p>价格<span class="iconfont icon-sortasc"></span>
                            <span class="iconfont icon-sortdesc"></span>
                        </p>
                    </li>
                    <li>
                        <p>筛选 <span class="iconfont icon-sortdesc" style="bottom: 1px
                    ;"></span></p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="blank3"></div>
        <div class="blank3" v-show="!show"></div>
        <div class="seach_list">
            <div class="hotsalesItem " v-show="!show">
                <div class="store ">
                    <router-link v-for="(item, index) in list" :key="index" :to="' /gameDetail?name=' + item.name" tag="div"
                        class="store_item">
                        <img :src="item.img" alt=" ">
                        <div class="hotsalesItem_inc ">
                            <p><i class="onsele" v-if="item.zk != undefined">促销</i> {{ item.name }}</p>
                            <ul style="flex-wrap: wrap;">
                                <li v-for="(tag, index) in item.gameType" :key="index">{{ tag }}</li>
                            </ul>
                            <div class="money ">
                                <span class="pri "><i>￥{{ item.price }}</i> </span>

                                <span class="onsele ">-{{ item.zk }}</span>
                            </div>
                        </div>
                    </router-link>
                </div>
                <div class="bottom" style="height: 20px;"></div>
            </div>
        </div>

    </div>
</template>
<style lang="scss" scoped>
.searchhistory {
    .historycontent {
        .content {
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
                color: #666666;
            }
        }

        .title {
            border-bottom: 1px solid #f5f5f5;

            p {
                font-size: 13px;
                color: #666666;
            }
        }

        p {
            padding: 12px 0;
            font-size: 12px;
        }

        padding: 0 12px;
        display: flex;
        flex-direction: column;
    }
}
</style>

<script>

import { getSearch } from '../api/searchView';
import { getSearchGame } from '../api/searchView';
export default {
    data() {
        return {
            show: false,
            list: null,//初始列表
            searchValue: '',//关键词
            gameList: null,//查询列表
            searchList: [],//返回的搜索结果
            historyList: JSON.parse(localStorage.getItem('historyList')) || [],//历史搜索
            recommendList: ['盗贼之海', '死亡岛', '心渊梦境']
        }
    }, methods: {
        change() {
            this.$store.commit('change', true)
        }, getSearchGame() {
            getSearchGame().then(data => {
                this.list = data
            })

        },
        getSearch() {
            if (this.searchValue !== '') {
                // 利用百度搜索的接口，查询
                getSearch({ wd: this.searchValue }).then(data => {
                    var obj = data.replace('window.baidu.sug(', '')
                    //分解数据
                    obj = obj.replace(');', '')
                    var arr = eval('(' + obj + ')')
                    //数据太多，只要前5条
                    this.searchList = arr.s.slice(0, 5)
                })
            }
        }, toGameDetail(item) {
            //点击之后，添加到历史搜索列表里面
            if (this.historyList.indexOf(item) == -1) {
                this.historyList.push(item)
            }
            //假如历史搜索列表里
            window.localStorage.setItem('historyList', JSON.stringify(this.historyList))
            //跳转到游戏详情页
            this.$router.push({ path: '/gameDetail', query: { name: item } })
        },
        delHistory(itemd) {
            //删除历史记录
            let index = this.historyList.findIndex((item) => item == itemd)
            this.historyList.splice(index, 1)
            window.localStorage.setItem('historyList', JSON.stringify(this.historyList))
        }
    }, created() {
        this.getSearchGame()
    }

}
</script>